<template>
  <div class="currentPage">
    <market-header />
    <div class="container">
      <div class="w1200 flex">
        <div class="containerLf">
          <div class="related">
            <p class="title">相关分类</p>
            <p class="category_name">男装</p>
            <ul class="related_list">
              <li>帽衫和运动衫</li>
              <li>上衣和T恤</li>
              <li>夹克和外套</li>
              <li>裤子</li>
              <li>衬衫</li>
              <li>牛仔裤</li>
              <li>毛衣</li>
              <li>休闲短裤</li>
            </ul>
          </div>
        </div>
        <div class="containerRt">
          <div class="topSearch">
            <p class="searchTitle">
              All categories > <span>男装</span> (Results {{ total }})
            </p>
            <div class="searchArea">
              <span>Search: </span>
              <el-input
                v-model="searchObj.name"
                placeholder="name"
                @keyup.enter.native="search"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search btn-search"
                  @click="search"
                />
              </el-input>
              <el-select v-model="searchObj.consignor" placeholder="发货人">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-checkbox-group v-model="searchObj.type" class="search_check">
                <el-checkbox label="POD">POD</el-checkbox>
                <el-checkbox label="DROPSHIP">DROPSHIP</el-checkbox>
                <el-checkbox label="All">All</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="products flex">
            <div v-for="(ele, index) in productsData" :key="index" class="item">
              <div class="imgBox">
                <el-image
                  class="preview"
                  fit="cover"
                  :src="imgPrefix + ele.images[ele.imgActiveIndex].uri"
                  alt=""
                  @click="goDetail(ele.product.id)"
                />
              </div>
              <thumbnail
                :ele="ele"
                :product-index="index"
                @setShowImg="setShowImg"
              />
              <p>{{ ele.product.name }}</p>
              <div class="itemBtm">
                <span>￥<i class="price">{{
                  ele.product.salePrice / 100
                }}</i></span>
                <div class="btns">
                  <el-dropdown
                    @command="(command) => gather(ele.product.id, command)"
                  >
                    <el-button
                      type="danger"
                      size="mini"
                      round
                    >Gather</el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="1">SHOPIFY</el-dropdown-item>
                      <el-dropdown-item
                        :command="2"
                      >WOOCOMMERCE</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button
                    class="cancel"
                    type="danger"
                    size="mini"
                    round
                    @click="collectFavorite(ele.product.id)"
                  >Collect</el-button>
                </div>
              </div>
            </div>
            <div v-if="productsData.length === 0" class="noTip">
              no data
            </div>
          </div>
          <el-pagination
            v-if="productsData.length > 0"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <market-footer />
  </div>
</template>

<script>
import MarketHeader from './components/header';
import MarketFooter from './components/footer';
import { marketPage } from '@/api/market';
import { collectFavorite, gather } from '@/api/product';
import thumbnail from './components/thumbnail';
export default {
  components: {
    MarketHeader,
    MarketFooter,
    thumbnail
  },
  data() {
    return {
      searchObj: {
        type: []
      },
      productsData: [],
      total: 0,
      currentPage: 1,
      pageSize: 12,
      options: []
    };
  },
  mounted() {
    this.setContainerHeight();
    window.addEventListener('resize', this.setContainerHeight);
    this.init();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setContainerHeight);
  },
  methods: {
    setContainerHeight() {
      const winHeight = document.documentElement.clientHeight;
      const headHeight =
        document.getElementsByClassName('topBar')[0].clientHeight +
        document.getElementsByClassName('header')[0].clientHeight;
      const footHeight = document.getElementsByClassName('footer')[0]
        .clientHeight;
      document.getElementsByClassName('container')[0].style.minHeight =
        winHeight - headHeight - footHeight + 'px';
      document.querySelector('.container > .flex').style.minHeight =
        winHeight - headHeight - footHeight + 'px';
    },
    init() {
      const categoryId = parseInt(this.$route.query.id);
      if (isNaN(categoryId)) {
        this.$router.push('/404');
        return;
      }
      marketPage({
        categoryId: categoryId,
        name: this.searchObj.name,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.productsData = res.data.data;
        this.productsData.forEach((item) => {
          item.imgActiveIndex = 0;
        });
        this.total = res.data.totalCount;
      });
    },
    collectFavorite(id) {
      collectFavorite([id]).then((res) => {
        if (res.code === 200) {
          this.$message.success('collect success');
        }
      });
    },
    gather(id, command) {
      gather({
        id: id,
        storeIds: [command]
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success('gather success');
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
    },
    search() {
      this.init();
    },
    setShowImg(imgIndex, index) {
      this.productsData[index].imgActiveIndex = imgIndex;
      const obj = JSON.parse(JSON.stringify(this.productsData[index]));
      this.$set(this.productsData, index, obj);
    },
    goDetail(id) {
      this.$router.push(`/marketing/detail?id=${id}`);
    }
  }
};
</script>
<style lang="scss" scoped>
.currentPage {
  overflow: hidden;
  position: relative;
  background: #f6f6f6;
}
.w1200 {
  width: 1200px;
  margin: 0 auto;
}
.flex {
  display: flex;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  .containerLf {
    background-color: #fff;
    width: 230px;
    padding: 10px 15px;
    .related {
      font-size: 14px;
      line-height: 24px;
      .category_name {
        padding-left: 10px;
      }
      .related_list {
        li {
          padding-left: 20px;
        }
      }
    }
  }
  .containerRt {
    flex: 1;
    padding: 10px 15px 10px 25px;
    .topSearch {
      .searchTitle {
        color: #848484;
        font-size: 12px;
        span {
          color: #333;
          font-weight: 600;
        }
      }
      .searchArea {
        margin-top: 10px;
        font-size: 12px;
        ::v-deep .el-input__inner {
          height: 28px;
          line-height: 28px;
        }
        .small {
          width: 60px;
        }
        .search_check {
          display: inline-block;
          .el-checkbox {
            margin-right: 10px;
          }
        }
      }
    }
    .products {
      padding: 20px 0 0;
      flex-wrap: wrap;
      justify-content: flex-start;
      .item {
        width: 215px;
        padding-bottom: 10px;
        margin-bottom: 15px;
        margin-right: 23px;
        box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.3);
        &:nth-child(4n + 4) {
          margin-right: 0;
        }
        .imgBox {
          > .el-image {
            width: 100%;
            height: 215px;
            overflow: hidden;
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
          }
        }
        p {
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;
          word-break: break-all;
          line-height: 17px;
          font-size: 13px;
          padding: 10px 5px 0;
        }
        .itemBtm {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 5px 0;
          span {
            font-size: 12px;
            color: #f56c6c;
            .price {
              font-style: normal;
              font-size: 14px;
              font-weight: 600;
            }
          }
          .el-button {
            padding: 3px 8px;
          }
          .cancel {
            margin-left: 10px;
          }
        }
      }
      .noTip {
        width: 100%;
        text-align: center;
        color: #848484;
        padding: 40px 0;
      }
    }
  }
}

.el-pagination {
  position: static;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
  background: #f6f6f6;
  width: auto;
  ::v-deep button {
    &:hover {
      color: #fe0002;
    }
  }
  ::v-deep .el-pager {
    li {
      &.active {
        color: #fe0002;
      }
      &:hover {
        color: #fe0002;
      }
    }
  }
}
</style>
